<template>
	<div class="demo">
		<h2>测试</h2>
		
		<el-upload
			class="avatar-uploader"
			drag
			action="http://upload.qiniu.com/"
			:before-upload="beforeUpload"
			:show-file-list="true"
			:data="UploadFileData"
			:on-success="handleSuccess">
			<img v-if="imgUrl.length != 0" :src="imgUrl" class="avatar" style="width: 100%">
			<div v-else>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			</div>
		</el-upload>
	</div>
</template>

<script lang="ts">
	import {Vue, Component} from "vue-property-decorator"
	
	@Component
	export default class demoComponents extends Vue {
		// 上传图片需要发送给 七牛 的数据
		public UploadFileData:Object = {
			token: "", // token 从接口获得
			key: null    // key 上传到七牛的视频文件名
		};
		$http: any;
		private imgUrl: string = "";
		
		// 上传成功后设置缩略图
		handleSuccess(response:any, file:any, fileList:any) {
			this.imgUrl = `http://vsassets.geekhelp.cn/${response.key}?vframe/png/offset/0`;
			console.log("imgUrl: ", this.imgUrl)
		}
		
		// 上传前获取token
		public async beforeUpload(file: any) {
			let token = await this.$http.post({
				url: '/admin/token',
				params: { filename : file.name }
			});
			console.log("token: ", token.result.qn_token)
			this.UploadFileData.key = file.name;
			this.UploadFileData.token = token.result.qn_token;
		}
	}
</script>

<style scoped lang="less">

</style>